<template>
  <!-- 第二步: -->
  <div class="bar" ref="bar"></div>
</template>

<script>
//第一步
import * as echarts from "echarts";
export default {
  name: "",
  mounted() {
    let mycharts = echarts.init(this.$refs.bar);
    let option = {
      xAxis: {
        show: false,
        //x轴方向均匀分布
        type: "category",
      },
      yAxis: {
        show: false,
      },
      //布局
      grid: {
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
      },
      series: {
        type: "bar",
        data: [34, 27, 56, 31, 66, 29],
        //柱状图的颜色
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "red", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "blue", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        //文本显示
        label: {
          show: true,
        },
      },
      //提示组件
      tooltip: {
        confine: true, //代表的是提示组件在容器内部不会超出去
        position: function (point, params, dom, rect, size) {   //提示框位置设置，相对于容器左侧决定定位
          // 固定在顶部
          return [point[0], "10%"];//距离顶部10%
        },
      },
    };
    mycharts.setOption(option);
     //当浏览器的窗口发生变化的时候监听事件---DOM2级事件
    window.addEventListener("resize",()=>{
       //图表自适应
       mycharts.resize();
    });
  },
};
</script>

<style scoped lang="scss">
.bar {
  width: 100%;
  height: 100%;
}
</style>
